// components/KnowledgeBase.js。
import React, { useState, useEffect } from 'react';
import { Container, Row, Col, Card, Form, Button } from 'react-bootstrap';
import axios from 'axios';

const KnowledgeBase = () => {
  const [knowledgeItems, setKnowledgeItems] = useState([]);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [search, setSearch] = useState('');

  useEffect(() => {
    fetchKnowledgeItems();
  }, []);

  const fetchKnowledgeItems = async () => {
    try {
      const response = await axios.get('http://localhost:5000/knowledge-base');
      setKnowledgeItems(response.data);
    } catch (error) {
      console.error('There was an error fetching the knowledge items!', error);
    }
  };

  const addKnowledgeItem = async () => {
    try {
      const response = await axios.post('http://localhost:5000/knowledge-base', { title, content });
      console.log(response.data.message);
      fetchKnowledgeItems();
    } catch (error) {
      console.error('There was an error adding the knowledge item!', error);
    }
  };

  const searchKnowledgeItems = async () => {
    try {
      const response = await axios.get(`http://localhost:5000/knowledge-base?search=${search}`);
      setKnowledgeItems(response.data);
    } catch (error) {
      console.error('There was an error searching the knowledge items!', error);
    }
  };

  return (
    <Container className="mt-4">
      <h1 className="mb-4">知识库管理功能页面</h1>

      <Card className="mb-4">
        <Card.Body>
          <Form>
            <Form.Group controlId="formTitle">
              <Form.Label>标题</Form.Label>
              <Form.Control type="text" placeholder="输入知识库条目的标题" value={title} onChange={(e) => setTitle(e.target.value)} />
            </Form.Group>
            <Form.Group controlId="formContent">
              <Form.Label>内容</Form.Label>
              <Form.Control as="textarea" rows={3} placeholder="输入知识库条目的内容" value={content} onChange={(e) => setContent(e.target.value)} />
            </Form.Group>
            <Button variant="primary" onClick={addKnowledgeItem}>
              添加知识库条目
            </Button>
          </Form>
        </Card.Body>
      </Card>

      <Card className="mb-4">
        <Card.Body>
          <Form>
            <Form.Group controlId="formSearch">
              <Form.Label>搜索</Form.Label>
              <Form.Control type="text" placeholder="搜索知识库条目" value={search} onChange={(e) => setSearch(e.target.value)} />
            </Form.Group>
            <Button variant="primary" onClick={searchKnowledgeItems}>
              搜索
            </Button>
          </Form>
        </Card.Body>
      </Card>

      <Row>
        {knowledgeItems.map(item => (
          <Col key={item.id} md={4} className="mb-4">
            <Card>
              <Card.Body>
                <Card.Title>{item.title}</Card.Title>
                <Card.Text>{item.content}</Card.Text>
              </Card.Body>
            </Card>
          </Col>
        ))}
      </Row>
    </Container>
  );
};

export default KnowledgeBase;
